<template>
    <div class="header">
        <div class="header-l">
            <el-image :src="require('@/assets/img/logo.png')" style="height: 30px;"></el-image>
            <ul>
                <li @click="$router.push('/')">首页</li>
                <li @click="$router.push('/course-center')">课程中心</li>
            </ul>
        </div>
        <div class="header-r">
            <el-button round size="medium" type="primary" @click="$router.push('/login')">登录/注册</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'header',
}
</script>

<style scoped>
.header {
    padding: 0 100px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
    z-index: 9999;
    margin-bottom: 20px;
}

.header ul {
    list-style: none;
}

.header-l {
    display: flex;
    align-items: center
}

.header-r {
    display: flex;
    align-items: center;
}

.header li {
    float: left;
    margin-left: 60px;
    cursor: pointer;
}

.header li:hover {
    color: #409EFF;
}
</style>